<template>
  <div class="c-wrapper">
    <div class="header">
      <div class="title">电梯运行趋势分析</div>
      <div class="time">
        <div class="time__tabs l-flex--row">
          <div
            v-for="item in timeTabs"
            :key="item.key"
            class="time__tab"
            :class="{ active: type === item.key }"
            @click="onTimeTabChange(item.key)"
          >
            {{ item.label }}
          </div>
        </div>
        <div class="time__picker">
          <span>自定义日期</span>
          <el-date-picker
            v-model="timeRange"
            align="right"
            type="daterange"
            style="width: 250px; margin-left: 8px"
            start-placeholder="开始日期"
            end-placeholder="截止日期"
            :clearable="false"
            value-format="yyyy-MM-dd"
            @change="onTimePickerChange"
          ></el-date-picker>
        </div>
      </div>
    </div>
    <div ref="canvas" class="chart" />
  </div>
</template>

<script>
import * as echarts from "echarts";
import { parseTime } from "@/utils/index";

export default {
  name: "TrendingChart",
  props: {
    value: {
      type: Array,
    },
  },
  data() {
    return {
      type: "",
      timeTabs: [
        // {
        //   key: "w",
        //   label: "近一周",
        // },
        // {
        //   key: "m",
        //   label: "近一月",
        // },
        // {
        //   key: "y",
        //   label: " 近一年",
        // },
        {
          key: "t",
          label: "今日",
        },
        {
          key: "w",
          label: "本周",
        },
        {
          key: "m",
          label: " 本月",
        },
      ],
    };
  },
  computed: {
    timeRange: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      },
    },
  },
  mounted() {},
  methods: {
    onTimeTabChange(key) {
      this.type = key;
      this.timeRange = this.getRangeDate(key);
    },
    getRangeDate(key) {
      let now = new Date();
      let cal = new Date()
      return [
        parseTime(
          {
            // w: new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000),
            // m: new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000),
            // y: new Date(now.getFullYear() - 1, now.getMonth(), now.getDate()),
            w: new Date(cal.setDate(cal.getDate()-cal.getDay()+(cal.getDay() === 0 ? -6 : 1))),
            m: new Date(now.getFullYear(), now.getMonth(), 1),
            t: new Date(),
          }[key],
          "{y}-{m}-{d}"
        ),
        parseTime(now, "{y}-{m}-{d}"),
      ];
    },
    resetType() {
      this.type = "";
    },
    onTimePickerChange() {
      const map = ["w", "m", "y"];
      this.type = "";
      for (const item of map) {
        const [start, end] = this.getRangeDate(item);
        if (this.timeRange[0] == start && this.timeRange[1] == end) {
          this.type = item;
          break;
        }
      }
    },
    initEchart(dataList) {
      const xdata = dataList.map((i) => i.trendDate);
      const numData = dataList.map((i) => i.alarmCount);
      const countData = dataList.map((i) => i.alarmElevatorCount);
      if (!this.$echarts) {
        this.$echarts = echarts.init(this.$refs.canvas, null, {
          renderer: "svg",
        });
      }
      this.$echarts.setOption({
        legend: {
          data: ["故障预警次数", "预警电梯数量"],
          itemWidth: 12,
          itemHeight: 12,
          icon: "rect",
          textStyle: {
            color: "#16161E",
            fontSize: 14,
          },
        }, //图例文字大小
        xAxis: {
          type: "category",
          data: xdata,
          splitLine: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#EBEEF5",
            },
          },
          axisLabel: {
            // interval: 0,
            color: "#868E96",
            fontSize: 12,
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: [
          {
            name: "单位: 台",
            type: "value",
            minInterval: 1,
            nameRotate: 90,
            nameLocation: "middle",
            splitLine: {
              lineStyle: {
                color: "#EBEEF5",
              },
            },
            nameTextStyle: {
              fontSize: 12,
              color: "#868E96",
              lineHeight: 90,
            },
            axisLine: {
              lineStyle: {
                color: "#EBEEF5",
              },
            },
            axisLabel: {
              color: "#868E96",
              fontSize: 12,
            },
          },
          {
            name: "单位: 次",
            type: "value",
            minInterval: 1,
            nameRotate: 90,
            nameLocation: "middle",
            splitLine: {
              show: false,
            },
            nameTextStyle: {
              fontSize: 12,
              color: "#868E96",
              lineHeight: 90,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              color: "#868E96",
              fontSize: 12,
            },
          },
        ],
        grid: {},
        series: [
          {
            name: "预警电梯数量",
            data: countData,
            type: "bar",
            barWidth: "10%",
            itemStyle: {
              color: "#75D8BC",
            },
            label: {
              show: false,
            },
            // emphasis: {
            //   focus: "self",
            // },
          },
          {
            yAxisIndex: 1,
            name: "故障预警次数",
            type: "line",
            showSymbol: false,
            symbolSize: 4,
            lineStyle: {
              width: 2,
              color: "#4880FF",
            },
            itemStyle: {
              color: "#4880FF",
            },
            data: numData,
          },
        ],
        tooltip: {
          padding: 0,
          trigger: "axis", //触发类型；轴触发，axis则鼠标hover到一条柱状图显示全部数据，item则鼠标hover到折线点显示相应数据，
          axisPointer: {
            z: 1,
            type: "shadow",
            shadowStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: "#DBF0FF",
                },
                {
                  offset: 1,
                  color: "rgba(193, 229, 255, 0)",
                },
              ]),
            },
          },
          formatter: function (a, b, c) {
            return `
            <div style='padding:8px;color: #4E5969;background: linear-gradient(308deg, rgba(253, 254, 255, 0.6) -5%, rgba(244, 247, 252, 0.6) 84%);'>
            <div style='line-height:32px'>${a[0].axisValue}</div>
            <div style='width:165px;line-height:32px;display:flex; justify-content:space-between;padding:0 8px;box-shadow: 6px 0px 20px 0px rgba(34, 87, 188, 0.1);margin-bottom:8px;border-radius: 4px;background: rgba(255, 255, 255, 0.8);'><div>故障预警次数</div><div>  ${a[1].value}</div></div>
            <div style='width:165px;line-height:32px;display:flex; justify-content:space-between;padding:0 8px;box-shadow: 6px 0px 20px 0px rgba(34, 87, 188, 0.1);border-radius: 4px;background: rgba(255, 255, 255, 0.8);'><div> 预警电梯数量</div><div>  ${a[0].value}</div></div>
            </div>
            `;
          },
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.c-wrapper {
  background: #fff;
}
.title {
  font-size: 16px;
  color: #212529;
}
.header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 40px;
  position: relative;
  .time {
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0;
    margin-right: 24px;
    font-size: 12px;
    &__tabs {
      background-color: #f2f6fc;
    }
    &__tab {
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      width: 60px;
      height: 34px;
      border: 1px solid #dcdfe6;
      &.active {
        color: #0d48ce;
        border: 1px solid #0d48ce;
        background-color: #fff;
      }
      &:last-child {
        border-radius: 0px 4px 4px 0px;
      }
      &:first-child {
        border-radius: 4px 0px 0px 4px;
      }
    }
    &__picker {
      display: flex;
      align-items: center;
      margin-left: 15px;
    }
  }
}
.chart {
  width: 100%;
  height: calc(100% - 40px);
}
</style>
